:root
{
--player-width: clamp(var(--player-min-width), var(--vw) - var(--chat-min-width), var(--vh) * 16 / 9);
}

html, body
{
min-width: calc(var(--player-min-width) + var(--chat-min-width));
min-height: max(var(--player-min-height), var(--chat-min-height));
}

.p1, .c1, .m1
{
display: block;
}



.p1
{
right: auto;
width: var(--player-width);
}

.c1
{
left: auto;
width: calc(var(--vw) - var(--player-width));
}

.m1, .ch1
{
right: calc(var(--vw) - var(--player-width));
}
.sm1
{
right: calc(var(--vw) - var(--player-width) + var(--menu-size));
}
.ch1
{
top: var(--menu-size);
}



@media (max-aspect-ratio: 1/1)
{
:root
{
--player-width: var(--vw);
--player-height: clamp(var(--player-min-height), var(--vw) * 9 / 16, var(--vh) - var(--chat-min-height));
}

html, body
{
min-width: max(var(--player-min-width), var(--chat-min-width));
min-height: calc(var(--player-min-height) + var(--chat-min-height));
}

.p1
{
right: 0;
bottom: auto;
width: auto;
height: var(--player-height);
}

.c1
{
top: auto;
left: 0;
width: auto;
height: calc(var(--vh) - var(--player-height));
}
}